<template>
    <div >
      <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="dialogData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <span>{{dialogData.title}}</span>
        </div>
        <el-row style="padding-bottom:150px;height:100%;overflow-y:auto;margin-top:20px">
          <el-col :span="18">
             <el-form :model="parames" size="small" :rules="rules" label-position="left" ref="parames" label-width="94px" class="addForm">
                <el-row style="padding: 0 40px" :gutter="30">
                      <el-col :span="12" style="margin-top:15px">
                        <el-form-item label="退款日期:" prop="refundDate">
                            <el-date-picker
                            style="width:100%"
                            v-model="parames.refundDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="margin-top:15px">
                        <el-form-item label="退款方式:" prop="refundAccountType">
                          <el-select style="width:100%" v-model="parames.refundAccountType" placeholder="请选择">
                            <el-option v-for="(item,index) in fukuanData" :key="index" :label="item.desc" :value="item.name"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="收款方式:" prop="receiptAccountType">
                          <el-select style="width:100%" v-model="parames.receiptAccountType" placeholder="请选择">
                            <el-option v-for="(item,index) in fukuanData" :key="index" :label="item.desc" :value="item.name"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="退款类型:" prop="refundType">
                          <el-select style="width:100%" v-model="parames.refundType" placeholder="请选择">
                            <el-option v-for="(item,index) in accountData" :key="index" :label="item.desc" :value="item.name"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="退款收款账户:" prop="receiptAccount" label-width="110px">
                          <el-input size="small" v-model="parames.receiptAccount" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="收款人:" prop="receiptPerson">
                          <el-input size="small" v-model="parames.receiptPerson" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="退款金额:" prop="refundAmount">
                          <el-input type="number" size="small" v-model="parames.refundAmount" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <!-- <el-col :span="12">
                        <el-form-item label="退款人:" prop="receiptPerson">
                          <userTree v-model="parames.sellerId" :currentValue="parames.sellerId"></userTree>
                        </el-form-item>
                      </el-col> -->
                      <!-- <el-col :span="12">
                        <el-form-item label="退款开始日期:">
                            <el-date-picker
                            :disabled="true"
                            style="width:100%"
                            v-model="parames.startDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="退款结束日期:">
                            <el-date-picker
                            :disabled="true"
                            style="width:100%"
                            v-model="parames.endDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                      </el-col> -->
                      <el-col :span="16">
                        <el-form-item label="退款原因:" prop="refundReason">
                          <el-input size="small" type="textarea" v-model="parames.refundReason" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                        <el-form-item label="备注信息:">
                          <el-input size="small" type="textarea" v-model="parames.remark" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="退款凭证:">
                          <el-upload
                            class="upload-demo"
                            multiple
                            :headers="myHeaders"
                            :action="fileAction"
                            :on-success="handleSucess"
                            :on-remove="handleRemove"
                            :file-list="file">
                            <el-button icon="el-icon-upload2" type="primary" plain style="width: 400px">点击上传</el-button>
                          </el-upload>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="退款合同产品:" prop="contractProductId" label-width="110px">
                          <!-- <el-input size="small" type="textarea" v-model="parames.remark" placeholder="请输入"></el-input> -->
                          <!-- <span>产品id:{{parames.contractProductId}}</span> -->
                          <el-button icon="el-icon-plus" size="small" @click="handelAddProduct">选择合同产品</el-button>
                        </el-form-item>
                        <el-table
                          :data="invoicingDetailList"
                          style="width: 100%">
                          <el-table-column
                            prop="customerName"
                            label="公司名称"
                            width="180">
                          </el-table-column>
                          <el-table-column
                            prop="productName"
                            label="产品名称"
                            show-overflow-tooltip
                            min-width="100">
                          </el-table-column>
                          <el-table-column
                            prop="allowRefundAmount"
                            label="可退金额">
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop="receiptStartDate" label="缴费开始时间">
                            <template slot-scope="scope">
                              {{scope.row.receiptStartDate | formatDate}}
                            </template>
                          </el-table-column>
                          <el-table-column show-overflow-tooltip prop="receiptEndDate" label="缴费结束时间">
                            <template slot-scope="scope">
                              {{scope.row.receiptEndDate | formatDate}}
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="address"
                            width="80"
                            label="操作">
                            <template slot-scope="scope">
                              <el-button size="mini" type="text" icon="el-icon-delete" @click.native="handleDelproduct(scope.$index,scope.row)"></el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
              <div v-if="dialogData.type == 'edit'">
                <el-button
                  @click="handleCancle"
                  size="small"
                  icon="el-icon-close"
                  style="width:200px;text-align: left;margin-bottom:10px"
                >取消编辑</el-button>
              </div>
            </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" type="primary" :loading="loadingBtn" @click="handleSave">保存</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </a-drawer>
      <hetongDialog :hetongData="hetongData" @watchSlect="watchSlect"></hetongDialog>
    </div>
</template>

<script>
import hetongDialog from './addRefundProduct'
export default {
    props: ['dialogData'],
    data() {
        return {
          loadingBtn: false,
          parames: {
            id: '',
            refundDate: '', //退款日期
            contractProductId:'', //合同产品ID
            refundAccountType:'', //退款方式
            receiptAccountType:'', //收款方式
            receiptAccount: '', //退款收款账户
            receiptPerson:'', //收款人
            refundAmount:'', //退款金额
            refundType:'', //退款类型
            refundReason:'', //退款原因
            // startDate:'', //退款开始时间
            // endDate:'', //退款结束时间
            attachmentSet:[],
            remark: '',
          },
          invoicingDetailList: [],
          tableKeys: [0,1,2,3],
          myHeaders: {authorization: ''},
          fileAction: this.$api.posFinanceRefundAttachmentUpload, //附件上传地址
          file: [],
          fileList: [],
          hetongData: {
            title: '',
            slectData: [],
            show: false
          },
          rules: {
            refundDate: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            refundAccountType: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            receiptAccountType: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            refundType: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            receiptAccount: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            receiptPerson: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            refundAmount: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            refundReason: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            contractProductId: [{ required: true, message: '请选择合同产品', trigger: ['change','blur' ]}],
          },
          fukuanData: [], //付款方式
          accountData: []
        };
    },
    methods: {
      handleClose () { //关闭弹窗
        this.dialogData.show = false
      },
      handleCancle () { //取消重新编辑
        this.dialogData.show = false
        this.$emit('checkOpen')
      },
      handleSucess (response,fileList) { //上传附件成功返回url
        this.fileList.push({
            name: response.data.name,
            url: response.data.url
        })
      },
      handleRemove (file) { //删除附件更新
          this.fileList.forEach((el,index)=>{
              if (file.response) {
                  if (el.url == file.response.data.url) {
                      this.fileList.splice(index, 1)
                  }
              } else {
                  if (el == file.url) {
                      this.fileList.splice(index, 1)
                  }
              }
          })
      },
      watchSlect (data) { //监听返回的选中的数组
        if (data) {
          this.invoicingDetailList = []
          this.invoicingDetailList.push(data)
          this.parames.contractProductId = data.contractProductId
        }
      },
      handleDelproduct (index,row) { //删除当前行
        this.invoicingDetailList.splice(index,1)
      },
      handelAddProduct () { //添加合同
        this.hetongData.title = '选择合同'
        this.hetongData.show = true
      },
      handleSave () { //保存
        this.$refs['parames'].validate((valid) => {
          if (valid) {
            let money = this.invoicingDetailList[0].allowRefundAmount
            if (this.parames.refundAmount > money) {
              this.$message.error('退款金额不能大于可退款金额')
              return false
            }
            this.parames.attachmentSet = this.fileList
            this.loadingBtn = true
            if (this.dialogData.type == 'edit') { //修改保存成功
              this.$post(this.$api.postFinanceRefundEdit,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '修改成功'})
                  this.handleClose()
                  this.$emit('checkOpen','1') //重新打开父级弹窗
                }
              })
            } else { //新增
              this.$post(this.$api.postFinanceRefundAdd,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '保存成功'})
                  this.$emit('checkRender')
                  this.handleClose()
                }
              })
            }
            setTimeout(() => {
              this.loadingBtn = false
            }, 300);
          }
        })
      },
      render () { //获取详情信息并修改
        this.loading = true
        this.$post(this.$api.postFinanceRefundFind,{
          refundId: this.dialogData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.id = data.id
            this.parames.refundDate = data.refundDate //退款日期
            this.parames.contractProductId = data.contractProductId //合同产品ID
            if (data.refundAccountType) {
                this.parames.refundAccountType = data.refundAccountType.name //退款方式
            }
            if (data.receiptAccountType) {
                this.parames.receiptAccountType = data.receiptAccountType.name //收款方式
            }
            this.parames.receiptAccount = data.receiptAccount //退款收款账户
            this.parames.receiptPerson = data.receiptPerson //收款人
            this.parames.refundAmount = data.refundAmount //退款金额
            if (data.refundType) {
                this.parames.refundType = data.refundType.name //退款类型
            }
            this.parames.attachmentSet = data.attachmentSet
            this.fileList = data.attachmentSet
            data.attachmentSet.forEach(el=>{
                this.file.push({
                    name: el.name,
                    url: el.url
                })
            })
            this.invoicingDetailList.push({
              customerName: data.customerName,
              productName: data.productName,
              allowRefundAmount: data.allowRefundAmount,
              receiptStartDate: data.receiptStartDate,
              receiptEndDate: data.receiptEndDate
            })
            this.parames.refundReason = data.refundReason //退款原因
            // this.parames.startDate = data.startDate //退款开始时间
            // this.parames.endDate = data.endDate //退款结束时间
            this.parames.remark = data.remark
            setTimeout(() => {
              this.loading = false
            }, 200);
          }
        })
      },
      getAccount () {//获取退款类型
        this.$post(this.$api.postFinanceRefundRefundType).then(response => {
          if (response.data.succeed) {
            this.accountData = response.data.data
          }
        })
      },
      resetData () { //重置数据
        this.parames.id = ''
        this.parames.refundDate = '' //退款日期
        this.parames.contractProductId ='' //合同产品ID
        this.parames.refundAccountType ='' //退款方式
        this.parames.receiptAccountType ='' //收款方式
        this.parames.receiptAccount = '' //退款收款账户
        this.parames.receiptPerson ='' //收款人
        this.parames.refundAmount ='' //退款金额
        this.parames.refundType ='' //退款类型
        this.parames.refundReason ='' //退款原因
        // this.parames.startDate ='' //退款开始时间
        // this.parames.endDate ='' //退款结束时间
        this.parames.remark = ''
        this.invoicingDetailList = []
        this.parames.attachmentSet = []
        this.fileList = []
        this.file = []
        this.$refs.parames.resetFields()
      }
    },
    components: {
      hetongDialog
    },
    computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
            this.$utils.getEnumberation('postProviderAccountType','fukuanData',this) //付款方式
            this.getAccount()
            // if (this.dialogData.type == 'new') {
            //   setTimeout(() => {
            //     this.parames.sellerId = this.$utils.getLocalStorage('user').id
            //   }, 200);
            // }
            if (this.dialogData.type == 'edit') {
              this.render()
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style>
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{
  left: 15px;
}
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header{
  background: #fafafa;
}
#addHet .ant-collapse > .ant-collapse-item{
  border-bottom: #f7f7f7 solid 1px!important;
}
</style>
